'use client';

import { useState, useEffect, useRef } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import styles from "./page.module.css";
import toast from "react-hot-toast";

const ProfilePage = () => {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const fileInputRef = useRef(null); // 用于触发文件选择框

  // 表单状态
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    avatar: "", // 存储图片URL（文件上传后会更新为临时URL）
    bio: "",
  });
  const [selectedFile, setSelectedFile] = useState(null); // 存储选中的文件

  // 1. 加载用户资料
  useEffect(() => {
    const fetchProfile = async () => {
      if (status !== "authenticated") return;

      try {
        const res = await fetch("/api/profile");
        const data = await res.json();

        if (!res.ok) throw new Error(data.error || "加载资料失败");

        setFormData({
          name: data.name,
          email: data.email,
          avatar: data.avatar,
          bio: data.bio,
        });
      } catch (err) {
        toast.error(err.message); // 用toast显示错误
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchProfile();
  }, [status]);

  // 2. 未登录时跳转
  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/login");
    }
  }, [status, router]);

  // 3. 处理表单输入变化
  const handleChange = (e) => {
    const { name, value } = e.target;
    // 如果修改了URL，清空已选文件（URL和文件二选一，文件优先）
    if (name === "avatar") {
      setSelectedFile(null);
    }
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // 4. 处理文件选择
  const handleFileSelect = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // 验证文件类型（只允许图片）
    if (!file.type.startsWith("image/")) {
      toast.error("请选择图片文件（jpg、png、webp等）");
      return;
    }

    // 验证文件大小（不超过5MB）
    if (file.size > 5 * 1024 * 1024) {
      toast.error("图片大小不能超过5MB");
      return;
    }

    // 保存文件并生成临时预览URL
    setSelectedFile(file);
    const tempUrl = URL.createObjectURL(file);
    setFormData(prev => ({ ...prev, avatar: tempUrl }));
  };

  // 5. 触发文件选择框（点击头像时调用）
  const handleAvatarClick = () => {
    fileInputRef.current.click();
  };

  // 6. 提交更新（包含文件上传逻辑）
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError("");

    try {
      let avatarUrl = formData.avatar;

      // 步骤1：如果有选中的文件，先上传到服务器获取URL
      if (selectedFile) {
        const formData = new FormData();
        formData.append("avatar", selectedFile);

        const uploadRes = await fetch("/api/upload-avatar", {
          method: "POST",
          body: formData,
        });

        const uploadData = await uploadRes.json();
        if (!uploadRes.ok) {
          throw new Error(uploadData.error || "头像上传失败");
        }
        avatarUrl = uploadData.url; // 替换为服务器返回的图片URL
      }

      // 步骤2：更新用户资料（包含头像URL）
      const res = await fetch("/api/profile", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: formData.name,
          avatar: avatarUrl,
          bio: formData.bio,
        }),
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "资料更新失败");

      // 成功提示
      toast.success("资料更新成功！");
      router.refresh();
    } catch (err) {
      toast.error(err.message); // 错误提示
      setError(err.message);
    } finally {
      setLoading(false);
      // 清除文件选择状态（避免重复上传）
      setSelectedFile(null);
      if (fileInputRef.current) {
        fileInputRef.current.value = "";
      }
    }
  };

  // 加载中状态
  if (status === "loading" || loading) {
    return <div className={styles.loading}>加载中...</div>;
  }

  // 错误状态（仅展示，实际已通过toast提示）
  if (error) {
    return <div className={styles.error}>{error}</div>;
  }

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>个人资料</h1>

      <form onSubmit={handleSubmit} className={styles.form}>
        {/* 头像预览和上传区域 */}
        <div className={styles.avatarSection}>
          <div
            className={styles.avatarContainer}
            onClick={handleAvatarClick} // 点击头像触发文件选择
          >
            <Image
              src={formData.avatar || "/contact.png"}
              alt="用户头像"
              width={120}
              height={120}
              className={styles.avatar}
            />
            <div className={styles.uploadOverlay}>
              <span>点击上传头像</span>
            </div>
          </div>

          {/* 隐藏的文件输入框 */}
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*" // 只允许图片文件
            onChange={handleFileSelect}
            className={styles.fileInput}
          />

          {/* 头像URL输入框（文件上传优先，URL作为备选） */}
          <div className={styles.formGroup}>
            <label className={styles.label}>
              或输入头像URL
              {selectedFile && <span className={styles.fileHint}>（已选择文件，将优先使用文件）</span>}
            </label>
            <input
              type="text"
              name="avatar"
              value={formData.avatar}
              onChange={handleChange}
              placeholder="输入图片URL（可选）"
              className={styles.input}
            />
          </div>
        </div>

        {/* 其他表单字段 */}
        <div className={styles.formGroup}>
          <label className={styles.label}>用户名</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
            className={styles.input}
          />
        </div>

        <div className={styles.formGroup}>
          <label className={styles.label}>邮箱（不可修改）</label>
          <input
            type="email"
            value={formData.email}
            disabled
            className={`${styles.input} ${styles.disabled}`}
          />
        </div>

        <div className={styles.formGroup}>
          <label className={styles.label}>个人简介</label>
          <textarea
            name="bio"
            value={formData.bio}
            onChange={handleChange}
            rows={4}
            placeholder="介绍一下自己吧~"
            className={styles.textarea}
          />
        </div>

        <button
          type="submit"
          disabled={loading}
          className={styles.button}
        >
          {loading ? "保存中..." : "保存修改"}
        </button>
      </form>
      {/* 在ProfilePage的表单下方添加 */}
      <div className={styles.linkContainer}>
        <a
          href="/dashboard/change-password"
          className={styles.link}
        >
          修改密码
        </a>
      </div>
    </div>
  );
};

export default ProfilePage;